<template>
	<view class="filmInfo">
		<view class="filmInfo-top">
			<view class="filmInfo-top-search">
				<!-- 搜索栏 -->
				<view class="jiangqie-search-input">
					<icon type="search" size="18" color="#999"></icon>
					<input type="number" maxlength="10" confirm-type="search" placeholder="只能填写数字.例如:3" placeholder-class="jiangqie-input-plholder"
						class="jiangqie-input" v-model="numberVal" @input="numberInput" />
				</view>
				<view class="btn" @click="queryResource">
					搜索定位集数
				</view>
			</view>
			<view class="filmInfo-top-solt">
				<view class="btn" @click="position">
					定位上次播放
				</view>
				<view class="rideo-box" @click="chageTabs('filmList')">
					<text class="rideo" :class="comName=='filmList'?'selet':''">
						<text :class="comName=='filmList'?'cuIcon-check':''"></text>
					</text>
					列表预览
					<text class="cuIcon-sort rideo-ico"></text>
				</view>
				<view class="rideo-box" @click="chageTabs('tabsBtnList')">
					<text class="rideo" :class="comName=='tabsBtnList'?'selet':''">
						<text :class="comName=='tabsBtnList'?'cuIcon-check':''"></text>
					</text>
					剧集预览
					<text class="cuIcon-sort rideo-ico"></text>
				</view>
			</view>
		</view>
		<!-- <component :is="comName" :filmData="filmData.records"></component> -->
		<film-list v-if="comName == 'filmList' && filmData" :filmData="filmData.records"
		@unlockResource="unlockResource"></film-list>
		<tabs-btn-list v-else-if="comName == 'tabsBtnList'" 
		:filmData="sortResourceList" @unlockResource="unlockResource"></tabs-btn-list>
		
		<image src="@/static/images/huojian.png" class="goTop" v-if="floorstatus" @click="goTop"></image>

		<!--加载框 start-->
		<tui-loading :visible="loading"></tui-loading>
		
		<!--提示解锁modul-->
		<view class="mask" v-if="showUnLock">
			<view class="modal-content" >
				<text class="cuIcon-close text-gray"
				  style="margin-left: 90%;font-size: 50rpx;padding: 5px;" @click="showUnLock = false"></text>
				<view class="huoqu">解锁视频</view>
		
				<view class="jifen text-center cu-btn bg-blue round down-btn"
				 @click.stop.prevent="goUnlock">
						<text class="cuIcon-video cuIconfont-spin" ></text>
						去解锁
				</view>
				
				<view class="shiping">解锁心仪视频</view>
				<view class="shiping2">看广告，解锁视频</view>
		
				<view class="tishi-ad">
					<view class="tishi-ad">❤看广告免费解锁心仪的视频❤</view>
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
	import http from "@/utils/http.js"
	import filmList from "./components/filmList/filmList.vue"
	import tabsBtnList from "./components/tabsBtnList/tabsBtnList.vue"
	import tuiLoading from '@/components/loading/loading';
	import tuiLoadmore from '@/components/loadmore/loadmore';
	import tuiNomore from '@/components/nomore/nomore';
	
	import {
		articleMixin
	} from "./mixins/articleMixin.js"
	
	export default {
		components: {
			filmList,
			tabsBtnList,
			tuiLoading,
			tuiLoadmore,
			tuiNomore
		},
		mixins: [articleMixin],
		data() {
			return {
				id: "",
				size: 10,
				current: 1,
				filmData: null,
				sortResourceList: null,
				comName: "filmList",
				floorstatus: false,
				currentTab: 0,
				scrollTop: 0,
				loading: false,
				ids: [],
				
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getplayRecord()
		},
		
		onPageScroll: function(e) {
			// 获取滚动条当前位置
			if (this.currentTab == 0) {
				this.scrollTop = e.scrollTop;
			}

			if (e.scrollTop > 200) {
				this.floorstatus = true
			} else {
				this.floorstatus = false
			}
		},
		methods: {
			//获取已播放id列表
			getplayRecord() {
				uni.showLoading({
					title: '加载中' // 内容
				});
				var params = {
					url: `/film/playRecord/u/getPlayRecord/${this.id}`,
					method: 'GET',

					callBack: (res) => {
						this.ids = res.data
						this.initFilm(true)
					}
				};
				http.request(params);
			},
			//初始化影视信息
			initFilm(refresh) {
				if(refresh){
					this.current = 1
				}
				var params = {
					url: `/platform/resources/${this.id}`,
					method: 'GET',
					data: {
						size: this.size,
						current: this.current,
						number: this.numberVal
					},
					callBack: (res) => {
						this.filmData = res.data
						this.filerFilm()
						uni.hideLoading();
						
						//数据排序
						this.sortResourceList = res.data.records
						this.sortResourceList.sort(function(a, b) {
						  return a.number - b.number;
						});
						
					}
				};
				http.request(params);
			},
			//切换列表
			chageTabs(type) {
				this.comName = type;
			},
			//筛选已查看广告影视
			filerFilm() {
				this.ids?.forEach(item => {
					this.filmData.records.forEach(subItem => {
						if (subItem.id == item) {
							subItem.type = true
							return
						}
					})
				})
			},
			goTop: function(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 500
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前版本过低，无法使用该功能，请升级到最新版本后重试。'
					});
				}
			},
			numberInput(e){
				//集数
				this.numberVal = e.detail.value
			},
			//搜索
			queryResource(){
				this.initFilm(true)
			},
			
		}
	}
</script>
<style>
	@import './article.css';

	/* 返回顶部 */
	.goTop {
		height: 80rpx;
		width: 80rpx;
		position: fixed;
		bottom: 150rpx;
		right: 30rpx;
		border-radius: 50%;
		z-index: 10;
	}
	
	/**
	 * 提示解锁
	 */
	.mask {
	    position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层背景颜色和透明度 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
	
	.modal-content {
	    flex-direction: column;
	    width: 80%;
	    background-color: #fff;
	    border-radius: 20rpx;
	}
		
	.huoqu {
	    text-align: center;
	    margin-bottom: 20px;
	}
	.shiping {
		font-size: 15px;
		color: black;
		font-weight: 600;
		margin-left: 20px;
	}
	
	.shiping2 {
	    font-size: 12px;
		text-align: center;
		color: gray;
		float: left;
		margin-left: 20px;
	}
	
	.tishi-ad{
		font-size: 12px;
		text-align: center;
		color: #ffafaf;
		margin-bottom: 15px;
		margin-top: 50px;
	}
	
	.jifen {
		float: right;
	    margin-right: 20px;
	}
	
	.down-btn{
		background-color: rgb(0, 129, 255);
		width: 200rpx;
		border-radius: 5px;
	}
	
	
	
	
	
</style>
